<template>
  <a-spin :spinning="confirmLoading">
    <a-table
    v-if="show"
      ref="table"
      size="middle"
      :scroll="{x:2000,y:720}"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="false"
      :loading="loading"
      class="j-table-force-nowrap">
        <template
          v-for="slotItem of slots"
          :slot="slotItem"
          slot-scope="text, record, index"
          >
          <slot :name="slotItem" v-bind="{ text, record, index }">
            <button :disabled="formDisabled ||currentDay < Number(slotItem.substring(3))" v-if="text" class="table-btn" @click="submitTalbe(record,slotItem,0)">{{ text }}</button>
            <button :disabled="formDisabled ||currentDay < Number(slotItem.substring(3))" v-else class="table-btn" @click="submitTalbe(record,slotItem,1)">{{ text}}</button>
          </slot>
      </template>
    </a-table>
    <j-form-container :disabled="formDisabled" v-else>
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="班级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classId">
              <j-dict-select-tag type="list" v-model="model.classId" dictCode="sk_class,class_name,id,del_flag = 0 order by sort_no asc" placeholder="请选择班级" />
            </a-form-model-item>
          </a-col>
            <a-col :span="24">
            <a-form-model-item label="日期" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="recordDate">
              <a-month-picker style="width:100%;" :disabled-date="disabledMonth" format="YYYY-MM" value-format="YYYY-MM"  v-model="model.recordDate" placeholder="请选择日期" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
   
  </a-spin>
</template>

<script>

  import { httpAction, getAction,putAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  import moment from "moment";
  export default {
    name: 'TbChildCareCheckTableForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        validatorRules:{
          classId:[
            { required: true, message: '请选择班级!'},
          ],
          recordDate:[
            { required: true, message: '请选择班级!'},
          ]
        },
        columns:[
          {
            title:'检查环节',
            align:"center",
            width:100,
            fixed:"left",
            dataIndex: 'checkNode',
            customRender:function(text){
              return (<div style="word-wrap:break-word;white-space:pre-wrap">{text}</div>)
            }
          },
          {
            title:'检查标注',
            align:"center",
            width:580,
            fixed:"left",
            dataIndex: 'checkContent',
            customRender:function(text){
              return (<div style="word-wrap:break-word;white-space:pre-wrap">{text}</div>)
            }
          },
        ],
        dataSource:[],
        loading:false,
        confirmLoading:false,
        url: {
          add: "/table/tbChildCareCheckTable/add",
          edit: "/table/tbChildCareCheckTable/edit",
          queryById: "/table/tbChildCareCheckTable/queryById"
        },
        show:false,
        currentDay:null
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
      slots() {
        let slots = [];
        for (let column of this.columns) {
          if (column.scopedSlots && column.scopedSlots.customRender) {
            slots.push(column.scopedSlots.customRender);
          }
        }
        return slots;
      }
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.currentDay = this.$skCommon.getDate(0).substring(8,10)
      let month = this.$skCommon.getDate(0)
      let days = this.$skCommon.getMonthDay(month.substring(0,7));
      console.log(days);
      for (let i = 1; i <= days; i++) {
        this.columns.push({
          title: i + "日",
          dataIndex: "day" + i,
          width:80,
          align:"center",
          scopedSlots: { customRender: "day" + i },
        });
      }
    },
    methods: {
      moment,
      disabledMonth (current) {
        return current > moment().endOf('day')
      },
      getList(data){
        const url = "/table/tbChildCareCheckTable/list";
        const params = {
          classId:data.classId,
          recordDate:data.recordDate,
        }
        getAction(url,params).then((res)=>{
          if(res.success){
            this.dataSource = res.result;
          } else {
            this.$message.warning(res.message);
          }
        }).catch((error)=>{
          console.error(error);
        })
      },  
      add () {
        this.edit();
      },
      edit (record) {
        if (record) {
          this.show = true;
          this.getList(record)
        }
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm(){
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            this.$emit("modelLoading",that.confirmLoading)
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              this.$emit("modelLoading",that.confirmLoading)
            })
          }
        })
      },
      submitTalbe (record,day,status) {
        this.loading = true;
        if (status) {
          record[day] = "√"
        }else{
          record[day] = ""
        }
        const url = "/table/tbChildCareCheckTable/edit"
        putAction(url,record).then((res)=>{
          if(res.success){
            this.loading = false;
          } else {
            this.$message.warning(res.message);
            this.loading = false;
          }
        }).catch((error)=>{
          this.loading = false;
          console.error(error);
        })
      },
    }
  }
</script>
<style scoped lang="less">
  /deep/ .ant-table-row-cell-break-word{
    padding:0 !important;
    height: 45px !important;
    .table-btn{
      width:100%;
      height: 100%;
      background: transparent;
      border:none;
      outline: none;
      cursor: pointer;
    }
  }
</style>